import React, {Component} from 'react';
import withStyles from "@material-ui/core/styles/withStyles";
import GridContainer from "../../components/Grid/GridContainer";
import GridItem from "../../components/Grid/GridItem";
import Card from "../../components/Card/Card";
import CardBody from "../../components/Card/CardBody";
import MaterialTable, {MTableToolbar} from 'material-table';
const tableStyles = {
    cardCategoryWhite: {
        color: "rgba(255,255,255,.62)",
        margin: "0",
        fontSize: "14px",
        marginTop: "0",
        marginBottom: "0"
    },
    cardTitleWhite: {
        color: "#FFFFFF",
        marginTop: "0px",
        minHeight: "auto",
        fontWeight: "300",
        fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
        marginBottom: "3px",
        textDecoration: "none"
    }
};
class TableList extends Component{
    constructor(props) {
        super(props);
        this.state={
            columns: [
                { title: '用户名', field: 'name' },
                { title: '身份', field: 'role',
                 lookup:{10:'系统管理员',11:'管理员',12:'普通用户',13:'财务'}},
                {
                    title: '车间',
                    field: 'workshop',
                    lookup: { 34: '车间1', 63: '车间2',58: '车间3' },
                },
                {
                    title: '备注',
                    field: 'remark',
                }
            ],
            data: [
                { name: 'admin', role: 10, workshop: 34, remark: 'test1' },
                { name: 'martine', role: 11, workshop: 63, remark: 'test2' },
                { name: 'joyce', role: 12, workshop: 58, remark: 'test3' },
                { name: 'john', role: 12, workshop: 63, remark: 'test4' },
                { name: 'henry', role: 13, workshop: 34, remark: 'test5' },
            ],
        }
    }
    render() {
        const { classes } = this.props;
        return (
            <div>
                <GridContainer>
                    <GridItem xs={12} sm={12} md={12}>
                        <Card>
                            <CardBody>
                                <MaterialTable
                                    components={{
                                        Toolbar: props => (
                                            <div style={{ backgroundColor: '#e8eaf5' }}>
                                                <MTableToolbar {...props} />
                                            </div>
                                        )
                                    }}
                                    title=""
                                    columns={this.state.columns}
                                    data={this.state.data}
                                    options={{
                                        exportButton: true,
                                        exportCsv: (columns, data) => {
                                            //override defalut methode joycewu
                                            alert('You should develop a code to export ' + data.length + ' rows');
                                        },
                                        grouping:true,
                                        search:true,
                                        actionsColumnIndex: -1
                                    }}
                                    localization={{
                                        header: {
                                            actions: '操作'
                                        },
                                        toolbar: {
                                            exportTitle:"导入",
                                            searchTooltip:"搜索",
                                            searchPlaceholder:"搜索",
                                            exportAriaLabel:"导入",
                                            exportName:"导入CVS"
                                        },
                                        grouping:{
                                            placeholder:"将标题拖到此处进行分组"
                                        },
                                        body: {
                                            emptyDataSourceMessage: '当前没有数据',
                                            addTooltip:'新增',
                                            deleteTooltip:"删除",
                                            editTooltip:"编辑",
                                            editRow:
                                                {
                                                    deleteText:"是否确认删除？",
                                                    cancelTooltip:'取消',
                                                    saveTooltip:"确认"
                                                },
                                        }
                                    }}
                                    editable={{
                                        onRowAdd: newData =>
                                            new Promise(resolve => {
                                                setTimeout(() => {
                                                    resolve();
                                                    const data = this.state.data;
                                                    data.push(newData);
                                                    this.setState({
                                                        data:data
                                                    })
                                                }, 600);
                                            }),
                                        onRowUpdate: (newData, oldData) =>
                                            new Promise(resolve => {
                                                setTimeout(() => {
                                                    resolve();
                                                    const data = this.state.data;
                                                    data[data.indexOf(oldData)] = newData;
                                                    this.setState({
                                                        data:data
                                                    })
                                                }, 600);
                                            }),
                                        onRowDelete: oldData =>
                                            new Promise(resolve => {
                                                setTimeout(() => {
                                                    resolve();
                                                    const data = this.state.data;
                                                    data.splice(data.indexOf(oldData), 1);
                                                    this.setState({
                                                        data:data
                                                    })
                                                }, 600);
                                            }),
                                    }}
                                />
                            </CardBody>
                        </Card>
                    </GridItem>
                </GridContainer>
            </div>
        )
    }
}
export default withStyles(tableStyles)(TableList);